@import "./constConfig.less";

.m_message_panel {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 15px;
  transform: translate(-50%, 0);
  box-sizing: border-box;
  z-index: 99999;
  .m_message {
    display: flex;
    align-items: start;
    position: relative;
    border: none;
    border-radius: 4px;
    background-color: @default-background-color;
    overflow: hidden;
    padding: 10px 15px;
    box-sizing: border-box;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    max-width: 600px;
    font-size: @default-font-size;
    .m_message_content {
      color: @default-color;
      padding: 0;
      margin: 0;
      word-wrap: break-word;
      overflow: hidden;
    }
    .m_message_btn_close {
      font-size: 12px;
      line-height: 19px;
      outline: none;
      cursor: pointer;
      border: none;
      background-color: transparent;
      box-sizing: border-box;
      margin-left: 10px;
      color: @default-color;
    }
    .m_message_btn_close:hover {
      color: @default-color-hover;
    }
  }
  .m_message.m_message_success {
    .m_message_content {
      color: @success-background-color;
    }
    .m_message_btn_close {
      color: @success-background-color;
    }
    .m_message_btn_close:hover {
      color: @success-background-color-hover;
    }
  }
  .m_message.m_message_warning {
    .m_message_content {
      color: @warning-background-color;
    }
    .m_message_btn_close {
      color: @warning-background-color;
    }
    .m_message_btn_close:hover {
      color: @warning-background-color-hover;
    }
  }
  .m_message.m_message_error {
    .m_message_content {
      color: @danger-background-color;
    }
    .m_message_btn_close {
      color: @danger-background-color;
    }
    .m_message_btn_close:hover {
      color: @danger-background-color-hover;
    }
  }
}
